<script lang="ts" setup>
import {IForm} from '@/interface/form'
import {defineModel, ref} from 'vue'

defineOptions({
	name: 'BaseSearch'
})
const props = defineProps<{
	searchConfig: IForm
}>()

const model = defineModel<any>() // 双向绑定
const searchForm = ref()
const emit = defineEmits(['searchFn', 'resetSearchFn'])
const searchFn = () => {
	emit('searchFn')
}
const restSearch = () => {
	searchForm.value.resetFields()
	if (props.searchConfig.otherConfig?.isRestSearch) {
		emit('searchFn')
	} else {
		emit('resetSearchFn')
	}
}
</script>

<template>
	<section class="mb-10 relative search">
		<BaseForm ref="searchForm" v-model="model" :form-config="searchConfig" class="form">
			<template v-for="name in Object.keys($slots)" :key="name" #[name]="scope">
				<slot :name="name" v-bind="scope"/>
			</template>
		</BaseForm>
		<div v-if="!searchConfig.otherConfig?.showLabels" class="btn">
			<el-button size="small" type="primary" @click="searchFn">查询</el-button>
			<el-button size="small" @click="restSearch">重置</el-button>
		</div>
	</section>
</template>

<style lang="scss" scoped>
.search {
	display: flex;
	justify-content: space-between;

	.form {
		flex: 1;
	}
}
</style>
